<template>
    <div class="content">
      <div class="category">
        <div
          :class="['category__item', currentTab === item.tab ? 'category__item--active' : '']"
          v-for="item in CATEGORIES" :key="item.name"
          @click="setNewTab(item.tab)"
        >{{item.name}}</div>
      </div>
      <div class="product">
        <div
          class="product__item"
          v-for="item in contentList"
          :key="item._id"
        >
          <img :src="item.imgUrl" class="product__item__img">
          <div class="product__item__detail" >
            <h4 class="product__item__title">{{item.name}}</h4>
            <p class="product__item__sales">月售{{item.sales}}</p>
            <p class="product__item__price">
              <span class="product__item__yen">&yen;{{item.price}}</span>
              <span class="product__item__origin">&yen;{{item.oldPrice}}</span>
            </p>
          </div>
          <div class="product__number">
            <span class="product__number__minus" @click="changeCartItem(shopId, item?._id, item, -1, shopName)">-</span>
            {{getProductCartCount(shopId, item._id, cartList)}}
            <span class="product__number__plus" @click="changeCartItem(shopId, item?._id, item, 1, shopName)">+</span>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import { reactive, ref, toRefs, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { getContentData } from '../../utils/http'
import { useCartEffect } from './CommonCartPrice'

const CATEGORIES = [
  { name: '全部商品', tab: 'all' },
  { name: '秒杀', tab: 'seckill' },
  { name: '新鲜水果', tab: 'fruit' }]

// 获取列表内容
const useContentDataEffect = (tab, id) => {
  const pageData = reactive({
    contentList: []
  })

  const getData = async () => {
    const result = await getContentData(id, tab.value)
    if (result?.data?.data) {
      pageData.contentList = result.data.data
    }
  }
  // 会立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。（有点像计算属性）
  watchEffect(() => {
    getData()
  })
  return { ...toRefs(pageData), getData }
}
// 控制标签选择
const useClickcategoryEffect = () => {
  const currentTab = ref(CATEGORIES[0].tab)
  const setNewTab = (tab) => {
    currentTab.value = tab
  }
  return { currentTab, setNewTab }
}
// 购物车相关逻辑
const useCartEffects = (changeCartItemInfo) => {
  const store = useStore()
  const changeShopName = (shopId, shopName) => {
    store.commit('changeShopName', { shopId, shopName })
  }
  const changeCartItem = (shopId, productId, productInfo, num, shopName) => {
    changeCartItemInfo(shopId, productId, productInfo, num)
    changeShopName(shopId, shopName)
  }
  const getProductCartCount = (shopId, productId, cartList) => {
    return cartList?.[shopId]?.productList?.[productId]?.count || 0
  }
  return { changeCartItem, getProductCartCount }
}

export default {
  name: 'Content',
  props: {
    shopName: {
      type: String,
      require: true
    }
  },
  setup () {
    const route = useRoute()

    const shopId = route.params.id
    const { currentTab, setNewTab } = useClickcategoryEffect()
    const { contentList } = useContentDataEffect(currentTab, shopId)
    const { cartList, changeCartItemInfo } = useCartEffect()
    const { changeCartItem, getProductCartCount } = useCartEffects(changeCartItemInfo)
    return {
      contentList,
      CATEGORIES,
      setNewTab,
      currentTab,
      changeCartItem,
      shopId,
      cartList,
      getProductCartCount
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/viriable.scss';
@import '../../style/mixins.scss';
.content {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 1.5rem;
  bottom: .5rem;
  .category {
    width: .76rem;
    height: 100%;
    background: $search-bgColor;
    overflow-y: scroll;
    &__item {
      height: .4rem;
      line-height: .4rem;
      text-align: center;
      font-size: .14rem;
      color: $content-fontcolor;
      border-bottom: .01rem solid $content-bgColor;
      &--active {
      background: $bg-color;
      }
    }
  }
  .product {
    flex: 1;
    overflow-y: scroll;
    &__item {
      display: flex;
      padding: .12rem 0;
      margin: 0 .16rem;
      border-bottom: .01rem solid $content-bgColor;
      position: relative;
      &__detail {
        // overflow: hidden;
        width: 100%;
      }
      &__img {
        width: .68rem;
        height: .68rem;
        margin-right: .16rem;
      }
      &__title {
        line-height: .2rem;
        font-size: .14rem;
        color: $content-fontcolor;
        margin: 0;
        @include ellipsis
      }
      &__sales {
        margin: .06rem 0;
        line-height: .16rem;
        font-size: .12rem;
        color: $content-fontcolor;
      }
      &__price {
        margin: 0;
        line-height: .2rem;
        font-size: .14rem;
        color: $light-fontcolor;
      }
      &__yen {
        font-size: .12rem;
      }
      &__origin {
        line-height: .2rem;
        font-size: .12rem;
        color: #999;
        margin-left: .06rem;
        // 横线
        text-decoration: line-through;
      }
      .product__number {
        position: absolute;
        right: 0;
        bottom: .12rem;
        &__minus, &__plus {
          width: .2rem;
          height: .2rem;
          display: inline-block;
          line-height: .18rem;
          text-align: center;
          border-radius: 50%;
          font-size: .2rem;
        }
        &__minus {
          border: .01rem solid $number-bordercolor;
          color: $number-bordercolor;
          margin-right: .1rem;
        }
        &__plus {
          background: #0091ff;
          color: $bg-color;
          margin-left: .1rem;
        }
      }
    }
  }
}
</style>
